import { mapState, mapActions } from 'vuex';
import moment from 'moment';
import * as api from '../../api/articles';
import { withMsg } from '../../utils/request';
import CommentList from '../../components/comment-list';
import CommentItem from '../../components/comment';
import 'vue-hljs/dist/style.css';

export default {
    components: {
        CommentList,
        CommentItem,
    },
    data () {
        return {
            commentValue: '',
            subCommentValue: '',
            authVisible: false,
            commentListLoading: false,
            subCommentListLoading: true,
            subCommentListPopupVisible: false,
            currentComment: {},
        };
    },
    computed: {
        ...mapState('detail', [
            'detail',
            'commentList',
            'subCommentList',
        ]),
        articlePubDate () {
            return moment(this.detail.pubdate).format('YYYY年MM月DD日');
        },
    },
    methods: {
        ...mapActions('detail', [
            'updateArticleDetail',
            'updateCommentList',
        ]),
        onScroll (e) {
            if (e.target.scrollTop > 100) {
                this.authVisible = true;
            } else {
                this.authVisible = false;
            }
        },
        // 获取相对时间
        getRelativeTime (time) {
            return moment(time).fromNow();
        },
        async likeComment (commentId, isLiking, isSub = false) {
            if (isLiking) {
                await withMsg(api.dislikeComment(commentId));
            } else {
                await withMsg(api.likeComment(commentId));
            }
            if (isSub) {
                this.subCommentListLoading = true;
                await this.updateCommentList({
                    source: this.currentComment.com_id,
                    type: 'c',
                });
                this.subCommentListLoading = false;
            } else {
                this.updateCommentList({
                    source: this.$route.query.id,
                    type: 'a',
                });
            }
        },
        async openSubCommentList (comment) {
            this.subCommentListPopupVisible = true;
            this.currentComment = comment;
            this.subCommentListLoading = true;
            await this.updateCommentList({
                source: comment.com_id,
                type: 'c',
            });
            this.subCommentListLoading = false;
        },
        async pubSubComment (value) {
            // 开启子评论列表loading
            this.subCommentListLoading = true;
            // 发表子评论
            await api.pubComment({
                target: this.currentComment.com_id,
                content: value,
                art_id: this.$route.query.id,
            });
            this.subCommentValue = '';
            // 更新子评论列表
            this.updateCommentList({
                source: this.currentComment.com_id,
                type: 'c',
            }).then(() => {
                // 请求完成关闭子评论列表loading
                this.subCommentListLoading = false;
            });
            // 更新评论列表
            this.updateCommentList({
                source: this.$route.query.id,
                type: 'a',
            });
        },
    },
    async mounted () {
        this.updateArticleDetail(this.$route.query.id);
        this.commentListLoading = true;
        await this.updateCommentList({
            source: this.$route.query.id,
            type: 'a',
        });
        this.commentListLoading = false;
    },
}
